<script>
import { defineComponent } from "vue";
import {pageHandler} from '@/mixins/pageHandler'
import MonitorHeader from "@/components/MonitorHeader/MonitorHeader.vue";
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";
import YingYaBan from "@/components/controls/YingYaBan.vue";
import NetState from "@/components/controls/netState.vue";
import RuanYaBan from "@/components/controls/RuanYaBan.vue";
import GuangZiPai from "@/components/controls/GuangZiPai.vue";
import BiLeiQi from "@/components/controls/biLeiQi.vue";
import XianQuan from "@/components/controls/xianquan.vue";
import TerminalSvg from "@/components/controls/terminal-svg.vue";
import ConnectLine from "@/components/controls/connect-line.vue";
import RectSvg from "@/components/controls/rect-svg.vue";
import KongZhiBaShou from "@/components/controls/KongZhiBaShou.vue";
import RightClickmenuList from "@/components/rightClickmenuList/rightClickMenuList.vue";
import GuapaiDialog from "@/components/rightClickmenuList/guapaiDialog.vue";
import YaokongDialog from "@/components/rightClickmenuList/yaokongDialog.vue";
import FourCircle from "@/components/controls/fourCircle.vue";

export default defineComponent({
  name: "muxianPage",
  components: { FourCircle, YaokongDialog, GuapaiDialog, RightClickmenuList, KongZhiBaShou, RectSvg, ConnectLine, TerminalSvg, XianQuan, BiLeiQi, GuangZiPai, RuanYaBan, NetState, YingYaBan, ScaleBox, MonitorHeader },
  mixins:[pageHandler],
  data() {
    return {
      hardPlatenDataList: [],
      flexiblePlatenDataList: [],
      GZPDataList:[],
      netStateList:[],
      singleYaBanList:[],
      signGZPList:[],
      p3_1GZPDataList:[],
      p3_2GZPDataList:[],
      p3_3GZPDataList:[],
      bashouList:[],

    };
  },
  mounted() {},
  methods:{
    initData(e){
      this.filterData(e)
    },
    filterData(data) {
      const typeMap = {
        "压板": "hardPlatenDataList",
        "软压板": "flexiblePlatenDataList",
        "光字牌": "GZPDataList",
        "网络状态": "netStateList"
      };

      for (const listName of Object.values(typeMap)) {
        this[listName] = [];
      }
      for (const [key, value] of Object.entries(data)) {
        for (const [type, listName] of Object.entries(typeMap)) {
          const filtered = value.filter(item => item.type === type);
          if (filtered.length > 0) {
            this[listName].push({ name: key, list: filtered });
          }
        }
      }
      console.log(this.hardPlatenDataList);
      this.p3_1GZPDataList=this.GZPDataList.filter(item=> item.name.includes('母线测控')||(item.name.includes('合并单元')&&!item.name.includes('断链')))
      this.p3_2GZPDataList=this.GZPDataList.filter(item=> item.name.includes('Ⅰ母Ⅰ段智能终端')||item.name.includes('Ⅱ母智能终端')||item.name.includes('220kVⅠ母Ⅰ段机构信号'))
      this.p3_3GZPDataList=this.GZPDataList.filter(item=> item.name.includes('220kV II母机构信号'))

    },
  }
});
</script>

<template>
  <div class="breaker-graph" @click="cancelLeftClickMenu" @contextmenu.stop="cancelLeftClickMenu" v-if="pageData">
    <ScaleBox :width="2320">
      <MonitorHeader :title="/^220kv/i.test($route.query.ftName || '') ? $route.query.ftName : '220kV' + $route.query.ftName" >
        <template v-slot:btns>
          <button @click="routerToMainPage">主接线图</button>
          <button @click="goMap">画面索引</button>
          <button>PCS915保护</button>
          <button>SGB750保护</button>
          <button @click="clearAll($route.query.ftName)">画面清闪</button>
          <button @click="operationRecords">操作记录</button>
        </template>
      </MonitorHeader>
      <main>
      <div class="p1">
        <div class="p1Top">
          <div class="p1svg">
            <svg>
              <g>
                <line x1="80" y1="307" x2="465" y2="307" stroke="rgb(128,0,128)" stroke-width="4"></line>
                <line x1="80" y1="267" x2="465" y2="267" stroke="rgb(128,0,128)" stroke-width="4"></line>
                <text x="30" y="257" fill="#FFFFFF" font-size="20px">220kV II母</text>
                <text x="30" y="297" fill="#FFFFFF" font-size="20px">220kV I母</text>
                <g>
                  <four-circle :scale=1.2 color="rgb(128,0,128)" :rotate="-90" :translate-x="50" :translate-y="250"></four-circle>
                  <bi-lei-qi :scale=1.2 color="rgb(128,0,128)" :rotate="-90" :translate-x="80" :translate-y="250"></bi-lei-qi>
                  <line x1="198" y1="93" x2="165" y2="93" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <line x1="180" y1="93" x2="180" y2="153" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <polyline points="180,123,250,123,250,153" stroke="rgb(128,0,128)" stroke-width="2"></polyline>
                  <polyline points="180,173,180,203,110,203,110,173" stroke="rgb(128,0,128)" stroke-width="2" transform="translate(0,25)"></polyline>
                  <line x1="180" y1="307" x2="180" y2="227" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <circle r="6" cx="180" cy="307" style="fill:rgb(128,0,128);"></circle>
                  <connect-line
                    :state="Number(pageData['glg'][0].state_val)"
                    :stateDesc="pageData['glg'][0].state_desc"
                    :name="pageData['glg'][0].state_desc"
                    :scale=0.9
                    :info="pageData['glg'][0]"
                    :translate-x="215"
                    :translate-y="158"
                    :text-translate-y="-5"
                    :rotate="90"
                    :text-scale="1"
                    @itemRightClick="itemRightClick"
                  />
                  <terminal-svg
                    :state="Number(pageData['dd'][1].state_val)"
                    :stateDesc="pageData['dd'][1].state_desc"
                    :name="'-'+pageData['dd'][1].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][1]"
                    :translate-x="272"
                    :translate-y="218"
                    :text-translate-y="40"
                    :text-translate-x="40"
                    :rotate="180"
                    @itemRightClick="itemRightClick"
                  />
                  <terminal-svg
                    :state="Number(pageData['dd'][0].state_val)"
                    :stateDesc="pageData['dd'][0].state_desc"
                    :name="'-'+pageData['dd'][0].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][0]"
                    :translate-x="87"
                    :translate-y="131"
                    :text-translate-y="-10"
                    :text-translate-x="0"
                    :rotate="0"
                    @itemRightClick="itemRightClick"
                  />
                </g>
                <g transform="translate(200,0)">
                  <four-circle :scale=1.2 color="rgb(128,0,128)" :rotate="-90" :translate-x="50" :translate-y="250"></four-circle>
                  <bi-lei-qi :scale=1.2 color="rgb(128,0,128)" :rotate="-90" :translate-x="80" :translate-y="250"></bi-lei-qi>
                  <line x1="198" y1="93" x2="165" y2="93" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <line x1="180" y1="93" x2="180" y2="153" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <polyline points="180,123,250,123,250,153" stroke="rgb(128,0,128)" stroke-width="2"></polyline>
                  <polyline points="180,173,180,203,110,203,110,173" stroke="rgb(128,0,128)" stroke-width="2" transform="translate(0,25)"></polyline>
                  <line x1="180" y1="267" x2="180" y2="227" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <circle r="6" cx="180" cy="267" style="fill:rgb(128,0,128);"></circle>
                  <connect-line
                    :state="Number(pageData['glg'][1].state_val)"
                    :stateDesc="pageData['glg'][1].state_desc"
                    :name="pageData['glg'][1].state_desc"
                    :scale=0.9
                    :info="pageData['glg'][1]"
                    :translate-x="215"
                    :translate-y="158"
                    :text-translate-y="-5"
                    :rotate="90"
                    :text-scale="1"
                    @itemRightClick="itemRightClick"
                  />
                  <terminal-svg
                    :state="Number(pageData['dd'][3].state_val)"
                    :stateDesc="pageData['dd'][3].state_desc"
                    :name="'-'+pageData['dd'][3].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][3]"
                    :translate-x="272"
                    :translate-y="218"
                    :text-translate-y="40"
                    :text-translate-x="40"
                    :rotate="180"
                    @itemRightClick="itemRightClick"
                  />
                  <terminal-svg
                    :state="Number(pageData['dd'][2].state_val)"
                    :stateDesc="pageData['dd'][2].state_desc"
                    :name="'-'+pageData['dd'][2].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][2]"
                    :translate-x="87"
                    :translate-y="131"
                    :text-translate-y="-10"
                    :text-translate-x="0"
                    :rotate="0"
                    @itemRightClick="itemRightClick"
                  />
                </g>
              </g>
            </svg>
          </div>
          <div class="p1Cons" style="margin-top: 2rem">
            <div style="position: relative">
              <div class="control-handle-wrapper" style="left:10px;transform: scale(1);width: 50%;">
                <div class="control-handle-grid" style="grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(1,1fr)">
                  <div v-for="(item, index) in pageData['操作把手'].slice(2)" :key="index" class="control-handle-grid-item">
                    <template>
                      <div class="svg-wrapper">
                        <svg>
                          <g v-if="item.state_desc.includes('解锁')">
                            <text x="20" y="15" fill="#FFFFFF" font-size="12px">联锁</text>
                            <text x="60" y="60" fill="#FFFFFF" font-size="12px">解锁</text>
                          </g>
                          <g v-else>
                            <text x="20" y="15" fill="#FFFFFF" font-size="12px">远方</text>
                            <text x="60" y="60" fill="#FFFFFF" font-size="12px">就地</text>
                          </g>
                        </svg>
                        <div class="polygon-icon">
                          <div  class="cursor-pointer" style="cursor: pointer">
                            <KongZhiBaShou style="margin-top: -10px" :info="item" :name="item.state_desc" :state="Number(item.state_val)"  @itemRightClick="itemRightClick" :deviceName="item.state_desc"  :jianGeMing="pageData.glg[1].jg_name"></KongZhiBaShou>
                          </div>
                        </div>
                      </div>
                      <div class="grid-item-name">{{item.state_desc}}</div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
            <div style="position: relative">
              <div class="control-handle-wrapper" style="left:300px;transform: scale(1);width: 20%;">
                <div class="control-handle-grid" style="grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(1,1fr)">
                  <div v-for="(item, index) in pageData['操作把手'].slice(0,2)" :key="index" class="control-handle-grid-item">
                    <template>
                      <div class="svg-wrapper">
                        <svg>
                          <g v-if="item.state_desc.includes('解锁')">
                            <text x="20" y="15" fill="#FFFFFF" font-size="12px">联锁</text>
                            <text x="60" y="60" fill="#FFFFFF" font-size="12px">解锁</text>
                          </g>
                          <g v-else>
                            <text x="20" y="15" fill="#FFFFFF" font-size="12px">远方</text>
                            <text x="60" y="60" fill="#FFFFFF" font-size="12px">就地</text>
                          </g>
                        </svg>
                        <div class="polygon-icon">
                          <div  class="cursor-pointer" style="cursor: pointer">
                            <KongZhiBaShou style="margin-top: -10px" :info="item" :name="item.state_desc" :state="Number(item.state_val)"  @itemRightClick="itemRightClick" :deviceName="item.state_desc"  :jianGeMing="pageData.glg[1].jg_name"></KongZhiBaShou>
                          </div>
                        </div>
                      </div>
                      <div class="grid-item-name">{{item.state_desc}}</div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
            <div class="hard-platen-wrapper" style="width: 100%;position: relative">
              <div class="hard-platen-item" style="transform: scale(1.2);left: .5rem;position: absolute">
                <div class="list-item" v-for="(o, i) in hardPlatenDataList[0].list.slice(0,2)" :key="i">
                  <div class="list-item-svg" >
                    <YingYaBan :info="o" :state="Number(o.state_val)" :scale="0.7" style="position: absolute;top: -10px"></YingYaBan>
                  </div>
                  <div class="list-item-name" style="cursor: pointer;">{{o.state_desc}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div class="p1Bottom" style="position: relative">
          <div class="hard-platen-wrapper" style="width: 100%;left: 0;top: 1rem">
            <div class="hard-platen-item" style="display: flex;flex-direction: column;flex-wrap: wrap;height: 100%;transform: scale(1.1);margin-top: 1rem;margin-left: 2rem">
              <div class="list-item" style="width: 100%;" v-for="(o, i) in hardPlatenDataList[0].list.slice(2)" :key="i">
                <div class="list-item-svg" >
                  <YingYaBan :info="o" :state="Number(o.state_val)" :scale="0.7" style="position: absolute;top: -10px"></YingYaBan>
                </div>
                <div class="list-item-name" style="cursor: pointer;">{{o.state_desc}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="p2">
        <div class="p2top">
          <div class="p2top1">
            <div class="remote-measurement-wrapper">
              <div class="remote-measurement-table">
                <table border="3" cellspacing="0">
                  <colgroup>
                    <col style="width: 15%;" />
                    <col style="width: 22%;" />
                    <col style="width: 22%;" />
                    <col style="width: 22%;" />
                    <col style="width: 15%;" />
                  </colgroup>
                  <thead>
                  </thead>
                  <tbody>
                  <tr style="background-color: rgb(20, 70, 140); color: white;">
                    <td>项目</td>
                    <td>1#母线</td>
                    <td>2#母线</td>
                    <td>3#母线</td>
                    <td>单位</td>
                  </tr>
                  <tr v-for="(item, index) in pageData['1#母线']" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                    <td :style="{color: 'white'}">{{item.state_desc}}</td>
                    <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item,true)">{{Number(item.state_val).toFixed(2)}}</td>
                    <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(pageData['2#母线'][index],true)">{{Number(pageData['2#母线'][index].state_val).toFixed(2)}}</td>
                    <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(pageData['3#母线'][index],true)">{{Number(pageData['3#母线'][index].state_val).toFixed(2)}}</td>
                    <td :style="{color: 'white'}">{{item.unit}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="remote-measurement-wrapper">
              <div class="remote-measurement-table">
                <table border="3" cellspacing="0">
                  <colgroup>
                    <col style="width: 35%;" />
                    <col style="width: 45%;" />
                    <col style="width: 20%;" />
                  </colgroup>
                  <tbody>
                  <tr v-for="(item, index) in pageData['遥测']" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                    <td :style="{color: 'white'}">{{item.state_desc}}</td>
                    <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item)">{{Number(item.state_val).toFixed(2)}}</td>
                    <td :style="{color: 'white'}">{{item.unit}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="netState-wrapper">
              <div class="netState-list" v-for="item in this.netStateList" content="netStateItem" style="margin-top: 0">
                <div class="netTitle">{{item.name}}</div>
                <net-state :info="items" :state="items.state_val" v-for="items in item.list"></net-state>
              </div>
            </div>
          </div>
          <div class="p2top2">
            <div class="gzpInner">
              <div v-for="o in GZPDataList.slice(1,6)" class="gzpItem">
                <div class="gzpTitle">{{o.name}}</div>
                <div v-for="item in o.list">
                  <GuangZiPai :info="item" :set-hei="true" height="35" :isClear="+item.is_clear" :jianGeMing="pageData.glg[1].jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="p2bottom">
              <div v-for="item in GZPDataList[0].list" class="p2BottomGzpItem">
                <GuangZiPai :info="item" :set-hei="true" height="13" :isClear="+item.is_clear" :jianGeMing="pageData.glg[1].jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
              </div>
        </div>
      </div>
        <div class="p3">
          <div>  <div class="gzpInner">
            <div v-for="o in p3_1GZPDataList" class="gzpItem">
              <div class="gzpTitle">{{o.name}}</div>
              <div v-for="item in o.list">
                <GuangZiPai :set-hei="true" height="18" :info="item" :isClear="+item.is_clear" :jianGeMing="pageData.glg[1].jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
              </div>
            </div>
          </div></div>
          <div>  <div class="gzpInner">
            <div v-for="o in p3_2GZPDataList" class="gzpItem">
              <div class="gzpTitle">{{o.name}}</div>
              <div v-for="item in o.list">
                <GuangZiPai  :set-hei="true" height="18" :info="item" :isClear="+item.is_clear" :jianGeMing="pageData.glg[1].jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
              </div>
            </div>
          </div></div>
          <div>  <div class="gzpInner">
            <div v-for="o in p3_3GZPDataList" class="gzpItem">
              <div class="gzpTitle">{{o.name}}</div>
              <div v-for="item in o.list">
                <GuangZiPai :set-hei="true" height="16.5" :info="item" :isClear="+item.is_clear" :jianGeMing="pageData.glg[1].jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
              </div>
            </div>
          </div></div>
        </div>
      </main>
    </ScaleBox>
    <rightClickmenuList v-if="rightMenuObj&&showMenu" :rightMenuObj="rightMenuObj" @menuItemClick="menuItemClick"></rightClickmenuList>
    <el-dialog  custom-class="yaokongPersonDialog" :visible.sync="operatorPwdDialogVisible_0" width="22%" :close-on-click-modal="false">
      <p slot="title" class="el-dialog__title">操作人</p>
      <div class="operatorPwd">
        <div class="operator">
          <label>请输入操作人</label>
          <el-select size="small" v-model="operatorPwdObj.username" style="width: 16rem;">
            <el-option
              v-for="(item,index) in userInfoJson.operatorList"
              :key="index"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </div>
        <div class="pwd">
          <label>请输入密码</label>
          <el-input v-model="operatorPwdObj.pwd" size="small" type="password"   @keydown.enter.native="operatorPwdSubmit_0"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" >
				<el-button size="small" @click="operatorPwdSubmit_0">确 定</el-button>
				<el-button size="small" @click="operatorPwdDialogVisible_0 = false">取 消</el-button>
			</span>
    </el-dialog>
    <el-dialog  custom-class="yaokongPersonDialog" :visible.sync="operatorPwdDialogVisible" width="22%" :close-on-click-modal="false">
      <p slot="title" class="el-dialog__title">监护人</p>
      <div class="operatorPwd">
        <div class="operator">
          <label>请输入监护人</label>
          <el-select size="small" v-model="adminPwdObj.username" style="width: 16rem;">
            <el-option
              v-for="(item,index) in userInfoJson.adminList"
              :key="index"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>

        </div>
        <div class="pwd">
          <label>请输入监护员密码</label>
          <el-input v-model="adminPwdObj.pwd" size="small" type="password" @keydown.enter.native="operatorPwdSubmit"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" >
				<el-button size="small" @click="operatorPwdSubmit">确 定</el-button>
				<el-button size="small" @click="operatorPwdDialogVisible = false">取 消</el-button>
			</span>
    </el-dialog>
    <el-dialog
      custom-class="switchPatrolDialog"
      :visible.sync="dialogVisible"
      :close-on-press-escape="true"
      :close-on-click-modal="true"
      :width="`40%`"
      :modal="false"
      @before-close="handleDialogClose"
    >

      <!-- 隔离刀 -->
      <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'gelidao'">

        <!-- 遥控 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
          <p slot="title" class="el-dialog__title">遥控</p>
          <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
        </template>

        <!-- 开关清闪 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
          <p slot="title" class="el-dialog__title">开关清闪</p>
        </template>



        <!-- 挂牌/摘牌 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
          <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
          <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
        </template>

        <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 4" size="small" @click="dialogVisible = false">取 消</el-button>

          <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
          <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 6" size="small" type="primary" @click="handleBrand">确 定</el-button>

				</span>
      </template>

      <!-- 地刀 -->
      <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'didao'">
        <!--          遥控-->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
          <p slot="title" class="el-dialog__title">遥控</p>
          <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
        </template>
        <!-- 开关清闪 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 0">
          <p slot="title" class="el-dialog__title">开关清闪</p>
          <span>暂无内容</span>
        </template>

        <!-- 全站清闪 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 4">
          <p slot="title" class="el-dialog__title">全站清闪</p>
          <span>暂无内容</span>
          <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
        </template>
        <!-- 挂牌/摘牌 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 5">
          <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
          <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
        </template>
        <span slot="footer" class="dialog-footer" >
            <!-- 遥控 按钮 -->					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 0" size="small" @click="dialogVisible = false">取 消</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>


          <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 5" size="small" type="primary" @click="handleBrand">确 定</el-button>
				</span>
      </template>

      <!-- 断路器 -->
      <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'duanluqi'">
        <!-- 遥控 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
          <p slot="title" class="el-dialog__title">遥控</p>
          <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
        </template>
        <!-- 开关清闪 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
          <p slot="title" class="el-dialog__title">开关清闪</p>
          <span>确定要将{{currentSelectMenuItemObj.currentObj.name}}开关清闪吗？</span>
          <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
        </template>
        <!-- 全站清闪 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 3">
          <p slot="title" class="el-dialog__title">全站清闪</p>
          <span>确定要将全部设备进行清闪吗？</span>
          <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
        </template>

        <!-- 挂牌/摘牌 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
          <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
          <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
        </template>
        <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 4" size="small" @click="dialogVisible = false">取 消</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 2" size="small" @click="clearFlesh">确定</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 3" size="small" @click="clearAll">确定</el-button>
          <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>

          <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 6" size="small" type="primary" @click="handleBrand">确 定</el-button>
				</span>
      </template>

      <!-- 把手 -->
      <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'bashou'">
        <!-- 操作 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
          <p slot="title" class="el-dialog__title">操作</p>
          <span>暂无内容</span>
        </template>
        <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 2" size="small" @click="dialogVisible = false">取 消</el-button>

				</span>
      </template>



      <template v-if="currentSelectMenuItemObj&&currentSelectMenuItemObj.type=='ruanyaban'">
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
          <p slot="title" class="el-dialog__title">遥控</p>
          <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
        </template>
        <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 2" size="small" @click="dialogVisible = false">取 消</el-button>

          <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
				</span>
      </template>




    </el-dialog>
    <el-dialog ref="operateRecordDialogRef" custom-class="operateRecordDialog" :modal="false" :close-on-click-modal="false" v-if="operationRecordsDialogVisible" :visible.sync="operationRecordsDialogVisible" v-dialogDrag:{dialogDrag}="true" width="35%">
      <p slot="title" class="el-dialog__title">操作记录</p>
      <div class="messageAlarmList">
        <el-table :data="operationRecordsData" width="100%" height="250" >
          <el-table-column prop="num" label="序号" width="85" header-align="center" align="center" >
            <template #default="{row}">
              <span :class="{'is-highlight': !!row.isHighlight}">{{row.num}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="操作时间" width="160" header-align="center" align="center" >
            <template #default="{row}">
              <span :class="{'is-highlight': !!row.isHighlight}">{{row.createTime}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="log_desc" label="操作描述" header-align="center" >
            <template #default="{row}">
              <span :class="{'is-highlight': !!row.isHighlight}">{{row.log_desc}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
@import "@/assets/css/public";
main {
  height: calc(100% - 90px);
  display: flex;
  justify-content: space-between;
  color: #FFFFFF;
  & > div {
    &:nth-of-type(1) {
      width: 24%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    &:nth-of-type(2) {
      width: 35%;
    }
    &:last-child {
      width: 35%;
    }
  }
}
.p3{
  background-color: rgba(9, 28, 38);
  border-radius: 30px;
  position: relative;
  display: flex;
  justify-content: space-between;
  >div:nth-child(1){
    width: 33%;

  }
  >div:nth-child(2){
    width: 33%;

  }
  >div:last-child{
    width: 33%;
  }
  .gzpTitle{
    color: #fff !important;
    font-size: 20px !important;
  }
}
.gzpInner{
  padding: 10px;
  .gzpItem{
    .gzpTitle{
      font-size: 22px;
      color: rgba(153, 82, 61);
      text-align: center;
    }
  }
}
.p2top{
  height: 65%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .p2top1{
    width: 53%;
    padding-top: 1rem;
    background-color: rgba(5, 23, 38);
    border-radius: 30px;
  }
  .p2top2{
    width: 45%;
    border: 1px solid #fff;
  }
}
.p2bottom{
  height: 35%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-top: 1rem;
  box-sizing: border-box;
  justify-content: flex-start;
  align-content: flex-start;
}
.p2BottomGzpItem{
  width: 40%;
  margin-left: .5rem;
}
.p1svg {
  height: 57%;
  padding: 10px 0;
  box-sizing: border-box;
  svg {
    width: 100%;
    height: 100%;
  }
}
.p1Top{
  border: 1px solid #fff;
  height: 58%;
}
.p1Bottom{
  border: 1px solid #fff;
  height: 38%;
}
.hard-platen-wrapper {
  position: absolute;
  left: 400px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  width: 50%;
  .hard-platen-inner {
    height: 100%;
    position: relative;

  }
  .hard-platen-name {
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    border-bottom: 2px solid #FFFFFF;
    padding: 2px;
    position: sticky;
    background-color: #000000;
    top: 1px;
  }
  .hard-platen-item {
    .hard-platen-item-name {
      color: #a9765e;
      font-size: 16px;
      text-align: center;
      padding: 10px;
      border-bottom: 2px solid #FFFFFF;
    }
    .list-item {
      display: flex;
      align-items: center;
      padding: 4px 10px;
      .list-item-svg {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        margin-right: 10px;
        cursor: pointer;
        position: relative;
        svg {
          width: 100%;
          height: 100%;
        }
      }
      .list-item-name {
        flex: 1;
        font-size: 14px;
      }
    }
  }
}
.p1Cons{
  height: 40%;
}
.control-handle-wrapper {
  box-sizing: border-box;
  position: absolute;
  left: 75px;
  .control-handle-name {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    border-bottom: none;
    padding: 4px;
  }
  .control-handle-grid {
    width: 100%;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(1, 1fr);
    .control-handle-grid-item {
      border: 1px solid #cccccc;
      height: 90px;
      text-align: center;
      padding: 0px;
      box-sizing: border-box;
      position: relative;
      .svg-wrapper {
        width: 100%;
        height: 60px;
        svg {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
        }
        .rotate {
          transform-origin: center;
        }
        .polygon-icon {
          position: absolute;
          left: 10px;
          top: 36px;
          width: 50px;
          height: 50px;
        }
      }
      .grid-item-name {
        margin-top: 10px;
        font-size: 12px;
      }
    }
  }
}
</style>
